import React from 'react'
import { Menu } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const StyledMenu = styled(Menu)`
  .item {
    cursor: pointer;
    margin-right: 1em;
  }
  .item:hover {
    background-color: #e8f1fb !important;
  }
  .ui.floating.label {
    position: absolute;
    z-index: 100;
    top: 0em;
    left: 90%;
    margin: 0 0 0 -1.5em !important;
  }
`

const menuStyle = {
  border: 'none',
  borderRadius: 0,
  boxShadow: 'none',
  marginTop: '.5em',
  borderBottom: '1px solid #e6e9f0',
  paddingLeft: '.5em',
  paddingRight: '2em',
  paddingBottom: '.5em',
  fontSize: '1.0rem',
}

const header = ({ children }) => (
  <StyledMenu borderless style={menuStyle} size="large">
    {children}
  </StyledMenu>
)

header.propTypes = {
  children: PropTypes.object.isRequired,
}

export default header
